<template>
    <div class="mr-root">
        
        <div class="mr-content">
            <div class="game-infors" v-for="(s,index) in game" :key="index">
                <back-header>
            <p class="title">{{s.cate_name}}</p>  
        </back-header>
       
                <div class="game-title">
                    <img :src="s.room_thumb" alt="">
                    <div class="game-img">
                        <img :src="s.owner_avatar" alt="">
                    </div>
                    <p>主播名字：{{s.room_name}}&#x3000;<span>{{status}}</span></p>
                    <p>在线人数:{{s.online | number}}</p>
                    <div v-for="(g,index) in sss " :key="index" class="da">
                        <div class="gift">
                            <img :src="g.himg" alt="">
                        </div>
                        <div class="float">
                            <p>{{g.name}}</p>
                            <p>￥{{g.pc}}元</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import BackHeader from '../components/BackHeader'
    export default {
        data() {
            return {
                game: [],
                status: "",
                sss: []

            }
        },
        components: {
            BackHeader
        },

        created() {
            this.axios.get(`/douyuapi/RoomApi/room/${this.$route.params.roomId}`)
                .then(data => {
                    this.game = this.game.concat(data.data.data)
                    this.status = this.game[0].room_status
                    this.status = this.status == 1 ? "直播中" : "休息中"
                    this.sss= this.game[0].gift
                    
                })
                .catch(err => {

                })

        }
    }

</script>
<style lang="" scoped>
 .mr-content{
     margin-top: 10px;
     width:100%;
 }
.game-title>img{
    width: 96%;
 }
.da{
  display: flex;
 
}
.gift{
     flex-basis: 53.333333%
     
}
.gift>img{
    margin-top: 10px;
}
.float{
    margin-top: 40px;
}
</style>